import { ProFormList, ProFormText, ProFormDigit } from '@ant-design/pro-form';
import { Button, message } from 'antd';
import { cloneDeep, isEmpty, isNumber } from 'lodash';

import styles from './style.less';

type deliveryListItem = {
  timeRange: string;
  startPoint: string;
  deliveryFee: string;
};

interface IOptionFormListProps {
  name: string;
  onChange?: (v: deliveryListItem) => void;
  deliveryFeeList: deliveryListItem[];
}

const FormList: React.FunctionComponent<IOptionFormListProps> = (props) => {
  const { name, deliveryFeeList } = props;
  //   const actionRef = useRef<any>();

  //   验证时间段
  const checkTimeValid = (timezone: string) => {
    if (timezone.indexOf('--') === -1) return false;

    const value = timezone.split('--');

    if (value.length !== 2) return false;

    if (value[0].length !== 4) return false;

    if (value[1].length !== 4) return false;

    if (parseInt(value[0].substring(0, 2)) > 24) return false;

    if (parseInt(value[0].substring(2, 4)) > 59) return false;

    if (parseInt(value[1].substring(0, 2)) > 24) return false;

    if (parseInt(value[1].substring(2, 4)) > 59) return false;
    return true;
  };

  const addItem = (action: any, index: number) => {
    const cur = cloneDeep(action.getCurrentRowData());

    if (isEmpty(cur.timeRange) || !checkTimeValid(cur.timeRange)) {
      message.error('输入时间段有误，请检查');
      return false;
    }

    if (!isNumber(cur.startPoint) || Number(cur.startPoint) < 0) {
      message.error('输入门槛金额有误，请检查');
      return false;
    }

    if (!isNumber(cur.deliveryFee) || Number(cur.deliveryFee) < 0) {
      message.error('输入外送费金额有误，请检查');
      return false;
    }

    action.add?.(
      {
        timeRange: '',
        startPoint: '',
        deliveryFee: '',
      },
      index + 1,
    );
  };

  return (
    <div className={styles['wrapper']}>
      <div className={styles['title-body']}>
        <div className={styles['title-one']}>时间段</div>
        <div className={styles['title-two']}> 门槛(单位:分)</div>
        <div className={styles['title-three']}>外送费(单位:分)</div>
      </div>
      <ProFormList
        name={name}
        creatorButtonProps={false}
        copyIconProps={false}
        deleteIconProps={false}
        // actionRef={actionRef}
        creatorRecord={{
          timeRange: '',
          startPoint: '',
          deliveryFee: '',
        }}
      >
        {(
          // 当前行的基本信息 {name: number; key: number}
          meta,
          // 当前的行号
          index,
          /**
           * action
           * @name 用于操作行的一些快捷方法
           * @example 给第二行增加数据 action.add?.({},1);
           * @example 删除第二行 action.remove?.(1);
           * @example 从 1 移到 2: action.move?.(2,1);
           * @example 获取当前行的数据: action.getCurrentRowData() -> {id:"xxx",name:'123',age:18}
           * @example 设置当前行的数据: {id:"123",name:'123'} -> action.setCurrentRowData({name:'xxx'}) -> {id:"123",name:'xxx'}
           * @example 清空当前行的数据：{id:"123",name:'123'} -> action.setCurrentRowData({name:undefined}) -> {id:"123"}
           */
          action,
        ) => {
          return (
            <div key={index} className={styles['wrapper-item']}>
              <ProFormText
                label={null}
                width={300}
                name="timeRange"
                placeholder="样例 1400--2000"
              />
              <ProFormDigit label={null} width={205} name="startPoint" placeholder="" />
              <ProFormDigit label={null} width={205} name="deliveryFee" placeholder="" />

              {deliveryFeeList.length - 1 === index ? (
                <Button
                  type="primary"
                  onClick={() => {
                    addItem(action, index);
                    // action.add?.();
                  }}
                >
                  添加
                </Button>
              ) : (
                <Button
                  type="primary"
                  onClick={() => {
                    action.remove?.(index);
                  }}
                >
                  删除
                </Button>
              )}
            </div>
          );
        }}
      </ProFormList>
    </div>
  );
};

export default FormList;
